<template>
	<view class="container">
		<!-- 顶部导航栏 -->
		<view class="header">
			<text class="back" @click="goBack">＜</text>
			<text class="title">个人中心</text>
			<text @click="toInfo">编辑</text>
		</view>

		<!-- 用户信息卡片 -->
		<view class="user-info">
			<image class="avatar" :src="userInfo.avatar" v-show="userInfo.avatar"/>
			<view class="user-detail">
				<text class="nickname">{{userInfo.nickName}}</text>
				<text class="phone">{{userInfo.phone}}</text>
				<text class="un_score" v-show="userInfo.status==0" @click="toIdentity">未实名</text>
				<text class="score" v-show="userInfo.status==1" @click="toRecord">积分：{{userInfo.points}}</text>
			</view>
		</view>


		<!-- 我的优惠券 -->
		<view class="card coupon-card" @click="goToCoupon">
			<view class="coupon-left">
				<image class="coupon-icon" src="/static/mp/mp彩色-优惠券.png" />
				<text class="coupon-title">我的优惠券</text>
			</view>
			<view class="coupon-right">
				<text class="coupon-count">3张</text>
				<image class="arrow-icon" src="/static/mp/mp右箭头.png" />
			</view>
		</view>

		<!-- 我的订单 -->
		<view class="card order-card">
			<view class="order-header">
				<text class="order-title">我的订单</text>
				<view class="order-all" @click="goToAllOrder">
					<text>全部订单</text>
					<image class="arrow-mini" src="/static/mp/mp右箭头.png" />
				</view>
			</view>
			<view class="order-status-list">
				<view class="order-status" v-for="item in orderStatus" :key="item.text" @click="goToOrder(item.type)">
					<image class="order-status-icon" :src="item.icon" />
				</view>
			</view>
		</view>

		<!-- 我的服务 -->
		<view class="card service-card">
			<text class="service-title">我的服务</text>
			<view class="service-list">
				<view class="service-item" v-for="item in serviceList" :key="item.text" @click="goToService(item.type)">
					<image class="service-icon" :src="item.icon" />
					<text class="service-text">{{item.text}}</text>
				</view>
			</view>
		</view>

		<!-- 退出登录按钮 -->
		<view class="logout-btn" @click="logout">退出登录</view>
	</view>
</template>

<script>
import request from '@/uitls/request.js'	
	export default {
		data() {
			return {
				userInfo: null,
				orderStatus: [{
						text: '待支付',
						icon: '/static/mp/mp待支付.png',
						type: 'pay'
					},
					{
						text: '待使用',
						icon: '/static/mp/mp待使用.png',
						type: 'use'
					},
					{
						text: '待评价',
						icon: '/static/mp/mp待评价.png',
						type: 'comment'
					}
				],
				serviceList: [{
						text: '领券中心',
						icon: '/static/mp/mp领券中心.png',
						type: 'couponCenter'
					},
					{
						text: '邀请好友',
						icon: '/static/mp/mp邀请好友.png',
						type: 'invite'
					},
					{
						text: '我的车辆',
						icon: '/static/mp/mp我的车辆.png',
						type: 'car'
					},
					{
						text: '消费记录',
						icon: '/static/mp/mp消费记录.png',
						type: 'record'
					},
					{
						text: '我的维修',
						icon: '/static/mp/mp我的维修.png',
						type: 'repair'
					},
					{
						text: '意见反馈',
						icon: '/static/mp/mp意见反馈.png',
						type: 'feedback'
					},
					{
						text: '收货地址',
						icon: '/static/mp/mp收货地址.png',
						type: 'address'
					},
					{
						text: '消息中心',
						icon: '/static/消息中心.png',
						type: 'message'
					}
				]
			}
		},
		methods: {
			goBack() {
				uni.navigateBack();
			},
			goToEditInfo() {
				uni.navigateTo({
					url: '/pages/editInfo/editInfo'
				});
			},
			goToMessage() {
				uni.navigateTo({
					url: '/pages/message/message'
				});
			},
			goToGroupBuy() {
				uni.navigateTo({
					url: '/pages/groupBuy/groupBuy'
				});
			},
			goToCarWash() {
				uni.navigateTo({
					url: '/pages/carWash/carWash'
				});
			},
			goToNearbyGas() {
				uni.navigateTo({
					url: '/pages/nearby-gas/nearby-gas'
				});
			},
			goToCoupon() {
				// 跳转到优惠券页面
				uni.navigateTo({
					url: '/pages/feng/coupons/coupons'
				});
			},
			goToAllOrder() {
				// 跳转到全部订单页面
				uni.navigateTo({
					url: '/pages/jackwang/wodedingdan/wodedingdan'
				})
			},
			goToOrder(type) {
				// 跳转到对应订单状态页面
				const statusMap={
					'pay':1,
					'use':2,
					'comment':3
				};
				uni.navigateTo({
					url: `/pages/jackwang/wodedingdan/wodedingdan?tabIndex=${statusMap[type]}`
				})
			},
			goToService(type) {
				// 跳转到对应服务页面
				if(type=='couponCenter'){
					uni.navigateTo({
						url: '/pages/feng/pickv/pickv'
					})
				}
				else if(type=='car'){
					uni.navigateTo({
						url: '/pages/feng/mycar/mycar'
					})
				} 
				else if(type=='record'){
					uni.navigateTo({
						url: '/pages/feng/crecording/crecording'
					})
				}
				else if(type=='repair'){
					uni.navigateTo({
						url: '/pages/feng/myrepair/myrepair'
					})
				}
				else if(type=='address'){
					uni.navigateTo({
						url: '/pages/yonghu1/address/address'
					})
				}
				else if(type=='message'){
					uni.navigateTo({
						url: '/pages/message/message'
					})
				}
			
			},
			logout() {
				request({
					url:'/auth/logout',
					method: 'DELETE',
					success(res){
						
					}
				})
				// 退出登录逻辑
				uni.redirectTo({
					url: '/pages/yonghu1/Login/Login'
				})
				uni.removeStorageSync('token')
			},
			toInfo(){
				uni.navigateTo({
					url: '/pages/jackwang/peoinfo/peoinfo'
				})
			},
			toIdentity(){
				uni.navigateTo({
					url:'/pages/yonghu1/identity/identity'
				})
			},
			toRecord(){
				uni.navigateTo({
					url:'/pages/yonghu1/pointsrecord/pointsrecord'
				})
			}
		},
		onShow(){
			this.userInfo = uni.getStorageSync('userInfo');
			console.log(this.userInfo)
		}
	}
</script>

<style>
	.container {
		/* #ifdef MP-WEIXIN */
		margin-top: 70rpx;
		/* #endif */
		background: url(/static/mp/背景版.png);
		background-size: 100% 35%;
		background-repeat: no-repeat;
		min-height: 100vh;
		padding-bottom: 100rpx;
	}

	.header {
		display: flex;
		align-items: center;
		justify-content: space-between;
		padding: 40rpx 30rpx 20rpx 30rpx;
		color: #fff;
	}

	.back {
		font-size: 28px;
		margin-right: 10px;
	}

	.title {
		font-size: 18px;
	}

	.right-icons {
		display: flex;
		gap: 20rpx;
		width: 60rpx;
	}

	.user-info {
		position: relative;
	}

	.avatar {
		position: absolute;
		width: 150rpx;
		height: 150rpx;
		border-radius: 50%;
		object-fit: cover;
		top: 50rpx;
		left: 310rpx;
	}

	.user-detail {
		flex: 1;
	}

	.nickname {
		position: absolute;
		font-size: 32rpx;
		color: #fff;
		top: 220rpx;
		left: 50rpx;
	}

	.phone {
		position: absolute;
		font-size: 32rpx;
		color: #fff;
		top: 220rpx;
		left: 290rpx;
	}
	.un_score{
		position: absolute;
		font-size: 32rpx;
		color: orange;
		top: 220rpx;
		right: 80rpx;
	}
	.score{
		position: absolute;
		font-size: 32rpx;
		color: white;
		top: 220rpx;
		right: 80rpx;
	}
	.edit-icon {
		width: 40rpx;
		height: 40rpx;
	}


	.arrow-icon {
		width: 40rpx;
		height: 40rpx;
	}

	.card {
		background: #fff;
		border-radius: 20rpx;
		margin: 300rpx 24rpx 0 24rpx;
		box-shadow: 0 2px 8px rgba(0, 0, 0, 0.03);
		padding: 0 0 0 0;
	}

	.coupon-card {
		display: flex;
		align-items: center;
		justify-content: space-between;
		height: 100rpx;
		padding: 0 32rpx;
	}

	.coupon-left {
		display: flex;
		align-items: center;
	}

	.coupon-icon {
		width: 40rpx;
		height: 40rpx;
		margin-right: 16rpx;
	}

	.coupon-title {
		font-size: 30rpx;
		color: #333;
	}

	.coupon-right {
		display: flex;
		align-items: center;
	}

	.coupon-count {
		color: #ff9900;
		font-size: 28rpx;
		margin-right: 8rpx;
	}

	.order-card {
		margin-top: 24rpx;
		padding-bottom: 24rpx;
	}

	.order-header {
		display: flex;
		align-items: center;
		justify-content: space-between;
		padding: 32rpx 32rpx 0 32rpx;
	}

	.order-title {
		font-size: 30rpx;
		color: #333;
		font-weight: bold;
	}

	.order-all {
		display: flex;
		align-items: center;
		color: #999;
		font-size: 24rpx;
	}

	.arrow-mini {
		width: 20rpx;
		height: 20rpx;
		margin-left: 4rpx;
	}

	.order-status-list {
		display: flex;
		justify-content: space-around;
		margin-top: 24rpx;
	}

	.order-status {
		display: flex;
		flex-direction: column;
		align-items: center;
	}

	.order-status-icon {
		width: 206rpx;
		height: 106rpx;
		margin-bottom: 8rpx;
	}

	.order-status-text {
		font-size: 26rpx;
		color: #666;
	}

	.service-card {
		margin-top: 24rpx;
		padding-bottom: 24rpx;
	}

	.service-title {
		display: block;
		font-size: 30rpx;
		color: #333;
		font-weight: bold;
		padding: 32rpx 32rpx 0 32rpx;
	}

	.service-list {
		display: flex;
		flex-wrap: wrap;
		padding: 24rpx 0 0 0;
	}

	.service-item {
		width: 25%;
		display: flex;
		flex-direction: column;
		align-items: center;
		margin-bottom: 32rpx;
	}

	.service-icon {
		width: 56rpx;
		height: 56rpx;
		margin-bottom: 8rpx;
	}

	.service-text {
		font-size: 24rpx;
		color: #666;
	}

	.logout-btn {
		margin: 48rpx 24rpx 0rpx 24rpx;
		height: 80rpx;
		background: #ededed;
		color: #bbb;
		border-radius: 40rpx;
		display: flex;
		align-items: center;
		justify-content: center;
		font-size: 30rpx;
	}
	
</style>